<template>
  <div ref="containerRef" class="screen-center">
    <div class="center-top">
      <Map />
    </div>
    <div class="center-bottom">
      <Center1 />
      <Center2 />
    </div>
  </div>
</template>

<script setup lang="ts">
import Map from './map.vue';
import Center1 from './center1.vue';
import Center2 from './center2.vue';
</script>

<style lang="scss" scoped>
.screen-center {
  width: 100%;
  height: 100%;
  padding: 0 8px 0 7px;
  .center-top {
    height: 60%;
  }
  .center-bottom {
    height: 40%;
    padding-bottom: 15px;
    display: flex;
    .screen-block + .screen-block {
      margin-left: 16px;
    }
  }
}
</style>
